<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
    <link href="plugs/layui/css/layui.css" rel="stylesheet"/>
    <link href="common/css/login.css" rel="stylesheet"/>
</head>
<body>
<div class="bg-image"></div>
<div class="content">
    <div class="login-form">
        <form>
<!--            <div class="item item-top">-->
<!--                <h1>电子票据管理系统院校端</h1>-->
<!--            </div>-->
            <div class="item">
                <input type="text" class="item-input" placeholder="用户名" id="username">
            </div>
            <div class="item">
                <input type="password" class="item-input" placeholder="密码" id="password">
            </div>
            <div class="item">
                <input type="checkbox" class="item-checkbox" value="1" id="rememberMe" checked>记住账号密码？
            </div>
            <div class="item">
                <button type="button" onclick="login()">登录</button>
            </div>
        </form>
    </div>
</div>

<!--<div class="content">-->
<!--    <div class="login">-->
<!--        <input type="text" placeholder="请输入用户名" name="username" id="username"/>-->
<!--        <input type="password" placeholder="请输入密码" name="password" id="password"/>-->
<!--        <input type="button" value="登录" onclick="login();">-->
<!--    </div>-->
<!--</div>-->
<script src="common/js/jquery.min.js"></script>
<script src="plugs/layui/layui.js"></script>
<script src="common/js/common.js"></script>
<script>
    $(function () {
        let username = getCookie("username");
        let password = getCookie("password");
        if (username !== undefined && username !== ''){
            $("#username").val(username);
        }
        if (password !== undefined && password !== ''){
            $("#password").val(password);
        }
    })

    /**
     * 登录
     */
    function login() {
        let username = $("#username").val();
        let password = $("#password").val();
        if (username === ''){
            layer.msg('请输入用户名', {icon:2});
            $("#username").focus();
            return;
        }
        if (password === ''){
            layer.msg('请输入密码', {icon:2});
            $("#password").focus();
            return;
        }

        let remember = $("#rememberMe").val();

        $.ajax({
            url:'/ajaxLogin',
            data: {"username":username, "password":password},
            type:"post",
            dataType:'json',
            success:function(result){
                if (result.code === 200){
                    sessionStorage.setItem("currentUser", JSON.stringify(result.data));
                    // 设置cookie
                    if (remember === '1'){
                        setCookie("username", username);
                        setCookie("password", password);
                    }else {
                        removeCookie("username");
                        removeCookie("password");
                    }
                    layer.msg(result.msg, {icon:1, time:1000}, function () {
                        location.href = '/index';
                    });
                }else {
                    layer.msg(result.msg, {icon:2});
                }
            }
        });
    }

</script>
</body>
</html>